<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
  <!-- uncomment lines below to include extra p5 libraries -->
  <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <!-- this line removes any default padding and style. you might only need one of these values set. -->
  <style> body {padding: 0; margin: 0;} canvas{border: 1px solid #f0f0f0; display: block;} img{ border: 1px solid #f0f;} div{ margin: 100px 0px;}</style>
</head>

<body>
  <div id='textSketch'>
  <img src="textSketch.png" width="240" height="160"></img>
  </div>
  <div id='textLineSketch'>
  <img src="textLineSketch.png" width="960" height="160"></img>
  </div>
  <div id='textWrapSketch'>
  <img src="textWrapSketch.png" width="960" height="160"></img>
  </div>
  <div id='textFontSketch'>
  </div>
  <div id='textAlignSketch'>
  <img src="textAlignSketch.png" width="240" height="160"></img>
  </div>
  <div id='textLeadingSketch'>
  <img src="LEFT.TOP.lead.png" width="400" height="200"></img>
  </div>
  <div id='textLeadingSketch2'>
  <img src="LEFT.CENTER.lead.png" width="400" height="200"></img>
  </div>
  <div id='textLeadingSketch3'>
  <img src="LEFT.BL.lead.png" width="400" height="200"></img>
  </div>
  <div id='textLeadingSketch4'>
  <img src="LEFT.BOTTOM.lead.png" width="400" height="200"></img>
  </div>
  <div id='textAlignmentSketch' style="position:relative">
  <img src="textAlignmentSketch.png" width="400" height="800" style="display:inline-block"></img>
  </div>
  <div id='textVertAlignmentSketch' style="position:relative">
  <img src="textVertAlignmentSketch.png" width="1000" height="200"></img>
  </div> 
  <div id='textSizeSketch'>
  <img src="textSizeSketch.png" width="240" height="160"></img>
  </div>
  <div id='textBoundsSketch'>
  </div>
  <div id='textStyleSketch'>
  </div>
  <div id='textWidthSketch'>
  <img src="textWidthSketch.png" width="240" height="160"></img>
  </div>
  <div id='textOverlapSketch'>
  <img src="textOverlapSketch.png" width="240" height="160"></img>
  </div>
  <div id='textFlySketch'>
  </div>
  <div id='textFlickerSketch'>
  </div>
  <div id='textFadeSketch'>
  </div>
  <div id='textRotateSketch'>
  </div>
  <div id='textGrowSketch'>
  </div>
  <div id='textAvoidSketch'>
  </div>
  <div id='textBendSketch'>
  </div>
  <div id='typographyLetterSketch'>
  </div>
</body>
</html>
